<template>
	<view class="content">
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item>
				<image class="swiper-item" src="../../static/img/banner1.jpg" @error="imageError"></image>
				<!-- <view class="swiper-item" style="background: url(../../static/img/banner1.jpg);background-size: cover;"></view> -->
			</swiper-item>
			<swiper-item>
				<image class="swiper-item" src="../../static/img/banner3.jpg" @error="imageError"></image>
				<!-- <view class="swiper-item" style="background: url(../../static/img/banner3.jpg);background-size: cover;"></view> -->
			</swiper-item>
		</swiper>

		<uni-card>
			<template v-slot:title>
				<view class="c_head">
					<span>基础服务</span>
					<span class="c_head_right" @click="queryList2">进度查询 ></span>
				</view>
			</template>
			<view class="c_row" style="margin-top: 20rpx;">
				<view class="c_cell" @click="queryList1()">
					<image :mode="item.mode" src="../../static/icon/1_5.png" @error="imageError"></image>
					<span>维修</span>
				</view>
				<!-- <view class="c_cell" @click="queryList1(1)">
					<image :mode="item.mode" src="../../static/icon/1_1.png" @error="imageError"></image>
					<span>安装</span>
				</view> -->
				<!-- <view class="c_cell" @click="queryList1(3)">
					<image :mode="item.mode" src="../../static/icon/1_3.png" @error="imageError"></image>
					<span>配件耗材</span>
				</view>
				<view class="c_cell" @click="queryList1(4)">
					<image :mode="item.mode" src="../../static/icon/1_4.png" @error="imageError"></image>
					<span>改造服务</span>
				</view> -->
			</view>
			<!-- <view class="c_row" style="margin-top: 20rpx;">
				<view class="c_cell">
					<image :mode="item.mode" src="../../static/icon/2_1.png" @error="imageError"></image>
					<span>安装</span>
				</view>
				<view class="c_cell">
					<image :mode="item.mode" src="../../static/icon/2_2.png" @error="imageError"></image>
					<span>维修</span>
				</view>
				<view class="c_cell"></view>
				<view class="c_cell"></view>
			</view> -->
		</uni-card>

		<!-- <uni-card>
			<template v-slot:title>
				<view class="c_head">
					<span>增值服务</span>
					<span class="c_head_right">订单查询 ></span>
				</view>
				<p style="font-size: 26rpx;color: #888;margin-left: 20rpx;">为您提供专业的家电设备服务和支持</p>
			</template>
			<view class="c_row" style="margin-top: 20rpx;">
				<view class="c_cell">
					<image :mode="item.mode" src="../../static/icon/2_1.png" @error="imageError"></image>
					<span>喜悦加清洗</span>
				</view>
				<view class="c_cell">
					<image :mode="item.mode" src="../../static/icon/2_2.png" @error="imageError"></image>
					<span>美加保研包</span>
				</view>
			</view>
		</uni-card> -->

		<!-- <uni-card>
			<template v-slot:title>
				<view class="c_head">
					<span>自主查询</span>
				</view>
			</template>
			<view class="c_row" style="margin-top: 20rpx;">
				<view class="c_cell">
					<image :mode="item.mode" src="../../static/icon/2_1.png" @error="imageError"></image>
					<span>收费标准</span>
				</view>
				<view class="c_cell">
					<image :mode="item.mode" src="../../static/icon/2_2.png" @error="imageError"></image>
					<span>服务标准</span>
				</view>
				<view class="c_cell">
					<image :mode="item.mode" src="../../static/icon/2_3.png" @error="imageError"></image>
					<span>包修政策</span>
				</view>
				<view class="c_cell" @click="toBugSelf">
					<image :mode="item.mode" src="../../static/icon/2_4.png" @error="imageError"></image>
					<span>故障自查</span>
				</view>
			</view>
		</uni-card> -->

		<uni-card>
			<template v-slot:title>
				<view class="c_head">
					<span>联系我们</span>
				</view>
			</template>
			<u-cell-group>
				<u-cell title="在线客服" :border="false" @click="tokefu">
					<u-icon slot="icon" size="24" name="kefu-ermai" color="#318bf5"></u-icon>
					<text slot="value" style="color: #888;">8:30至23:00</text>
				</u-cell>
				<u-cell title="服务热线" :border="false" @click="open">
					<u-icon slot="icon" size="24" name="phone" color="#318bf5"></u-icon>
					<text slot="value" style="color: #888;">7x24小时</text>
				</u-cell>
				<!-- <u-cell title="举报假货" :border="false">
					<u-icon slot="icon" size="24" name="bell" color="#318bf5"></u-icon>
					<text slot="value" style="color: #888;">官方认证渠道</text>
				</u-cell> -->

			</u-cell-group>
		</uni-card>

		<u-popup :show="show" mode="center" @close="close" @open="open" :closeable="true">
			<view>
				<p style="text-align: center;font-size: 40rpx;">服务热线</p>
				<p style="text-align: center;color: #888;">工作时间 7x24小时</p>
				<image style="height: 280rpx;margin-top: 20rpx;" :mode="item.mode" src="../../static/icon/kefu.jpg" @error="imageError"></image>
				<u-cell-group>
					<u-cell title="客服">
						<text slot="value" style="color: #318bf5;">400-8899-315</text>
					</u-cell>
					<!-- <u-cell title="项目">
						<text slot="value" style="color: #318bf5;">400-8228-228</text>
					</u-cell> -->
					<u-cell title="管理员">
						<text slot="value" style="color: #318bf5;">400-969-9999</text>
					</u-cell>
				</u-cell-group>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: true,
				interval: 10000,
				duration: 1000,

				cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},
				show: false,
			}
		},
		methods: {
			toBugSelf(){
				uni.navigateTo({
					url:'/pagesIndex/bugSelf/bugSelf'
				})
			},
			queryList1(index){
				uni.navigateTo({
					url:'/pagesIndex/servise/servise'
					// url:'/pagesIndex/order/order?index='+index
				})
			},
			queryList2(){
				uni.navigateTo({
					url:'/pagesIndex/order/order?idnex=0'
				})
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			onClick(e) {
				console.log(e)
			},
			actionsClick(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
			},
			close(){
				this.show = false
			},
			open(){
				this.show = true
			},
			tokefu(){
				/* uni.navigateTo({
					url:'/pagesIndex/lineKeFu/lineKeFu'
				}) */
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
			}
		}
	}
</script>

<style>
	page {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
	}
	// 去掉页面滚动条
	::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-line{
		display: none;
	}
	::v-deep .u-popup__content {
		padding: 70rpx 40rpx 20rpx 40rpx;
	}
	::v-deep .u-safe-bottom{
		display: none;
	}
	.content{
		padding-bottom: 20rpx;
		height: calc(100vh - 20rpx);
		background-color: #f3f7fd;
	}
	.c_head{
		display: flex;
		justify-content: space-between;
		margin: 20rpx 20rpx 0 20rpx;
		.c_head_right{
			color: #888;
			font-size: 26rpx;
		}
	}
	.c_row {
		display: flex;
		justify-content: flex-start;
		.c_cell {
			width: 25%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			span {
				margin: 20rpx 0;
			}
			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
	.swiper {
		height: 422rpx;
	}
	.swiper-item {
		display: block;
		width: 100%;
		height: 422rpx;
		line-height: 422rpx;
		text-align: center;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}
	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}
</style>